<template>
	<view id="myview">
		<view id="faxian"><text>发现</text></view>
		<scroll-view scroll-x="{{true}}" id="xuanxiang" show-scrollbar="{{true}}" enhanced="{{false}}">
			<view v-for="(v,i) in arr" @click="choose(i,v)" :class="a==i?'xuanxiang':''">{{v}}</view>
		</scroll-view>
		<view id="mybody">
			<view class="tab" v-for="(v,i) in xinxi">
				<view @click="jieda(i)">
					<view><text>{{v.fx_biaoti}}</text></view>
					<view><text>医疗情报站</text><text>1小时前</text></view>
				</view>
				<view>
					<image :src="IP+v.fx_imgsrc"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {ref,reactive,toRefs,onMounted} from 'vue'
	import http from '../../utils/http.js'
	import store from '../../store/index.js'
	export default {
		setup(){
			let data=reactive({
				arr:['推荐','儿科','妇科','皮肤','消化','呼吸','内分泌'],
				xinxi:[], 
				IP:'',
				a:0,
				choose:(obj,obj1)=>{
					data.a=obj;
					http({
						url:'/appFaxianFenlei',
						data:{
							fx_fenlei:obj1
						},
						method:'post'
					}).then((res)=>{
						data.xinxi=[]
						store.commit('allData',res.data.data)
						for(let i=0;i<res.data.data.length;i++){
							data.xinxi.push(res.data.data[i])
						}
					})
				},
				jieda:(i)=>{
					store.commit('xiaBiao',i)
					uni.navigateTo({
						url:'../foundfangfa/foundfangfa'
					})
				}
			})
			onMounted(()=>{ 
				data.IP=store.state.IP
				http({
					url:'/appAllData',
					method:'get',
				}).then((res)=>{
					store.commit('allData',res.data.data)
					for(let i=0;i<res.data.data.length;i++){
						data.xinxi.push(res.data.data[i])
					}
				})
			})
			return{...toRefs(data)}
		}
	}
</script>

<style lang="less">
#faxian{
	line-height: 100rpx;
	line-height: 100rpx;
	border-bottom: 1px solid #f5f5f5;
	text{
		display: inline-block;
		margin-left: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
	}
}
#xuanxiang{
	width: 750prx;
	white-space: nowrap;
	view{
		display: inline-block;
		width: 132rpx;
		height: 89rpx;
		line-height: 89rpx;
		text-align: center;
	}
	.xuanxiang{
		color: #d70c0c;
		border-bottom: 2px solid #d70c0c;
	}
}
#mybody{
	margin-top: 25rpx;
	width: 750rpx;
}
.tab{
	display: flex;
	width: 750rpx;
	height: 272rpx;
	background-color: #f2f2f2;
	>view:nth-child(1){
		background-color: white;
		margin-top: 25rpx;
		width: 440rpx;
		height: 247rpx;
		>view:nth-child(1){
			width: 440rpx;
			height: 180rpx;
			padding: 15rpx 0rpx 15rpx 20rpx;
			box-sizing: border-box;
		}
		>view:nth-child(2){
			width: 440rpx;
			height:67rpx;
			line-height: 67rpx;
			padding: 0rpx 0rpx 0rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			color: #b6b0b2;
			text:nth-child(1){
				display: inline-block;
				margin-right: 60rpx;
			}
		}
	}
	>view:nth-child(2){
		margin-top: 25rpx;
		flex:1;
		height:247rpx ;
		background-color: white;
		image{
			width:243rpx;
			height:162rpx;
			margin-top: 40rpx;
			margin-left:27rpx;
			
		}
	}
}
</style>
